const http = require("http");

const server = http.createServer((request, response) => {
  let table = `
  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        td {
          padding: 20px 40px;
        }
        table, td {
          border-collapse: collapse;
        }
        tr:nth-child(odd) {
          background: #aef;
        }
        tr:nth-child(even) {
          background: #fcb;
        }
      </style>
    </head>
    <body>
      <table border="1">
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>

        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>

        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>

        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
        </tr>
      </table>

      <script>
        const tdsEl = document.querySelectorAll('td')
        tdsEl.forEach(item => {
          item.onclick = function(){
            this.style.background = '#222'
          }
        })

      </script>
    </body>
  </html>
  `;
  response.end(table);
});

server.listen(9000, () => {
  console.log("服务已经启动...");
});
